Skip to content

fix(ui): consistent disabled tokens + filter popover UX + input-group height#355

Merged
jettapat-metier merged 8 commits into
mainfrom
touch/fix/ui
May 19, 2026
Merged

fix(ui): consistent disabled tokens + filter popover UX + input-group height#355
jettapat-metier merged 8 commits into
mainfrom
touch/fix/ui

Conversation

@jettapat-metier
Copy link
Copy Markdown
Collaborator

Why did you create this PR

What did you do

  • Standardise disabled state tokens across all form primitives so they share the same grey
    chrome
    (Input, Textarea, Select, Switch, RadioGroup, Checkbox, Toggle, Tabs, Slider, Command,
    ColorPicker, Calendar)
  • Make InputGroup auto-detect a :disabled descendant input/textarea and the
    aria-disabled attribute
    so wrappers around RichTextEditor and fieldset-disabled forms render the disabled chrome
    correctly
  • Lock InputGroup wrapping a direct <input> to h-18 to match sibling Buttons;
    previously it
    was 74px because the wrapper border stacked on top of the inner Input's h-18
  • Filter popover: keep the focus ring on the trigger while the popover is open
  • Filter popover: align popover content to the trigger's end edge so the 600px panel doesn't
    extend past the toolbar
  • Filter popover: highlight the currently active column in the left list with the hover
    background
  • Filter popover: disable "Reset All" when no filter is selected
  • Update the existing changeset to cover all of the above (patch on @genseki/ui)

Screenshots / Recordings

Checklist

  • Self-reviewed your code
  • Wrote coverage tests
  • Added screenshots or recordings if applicable

touchsung added 8 commits May 19, 2026 14:22
Outer InputGroup measured 74px (Input h-18 + wrapper border) while
sibling Buttons measured 72px (h-18 with border-box). This 2px gap was
visible in toolbars that placed SearchInput next to a Button (e.g.
Filter).

Force the outer wrapper to h-18 only when it directly contains an
<input>, and stretch InputGroupControl to h-full so the input fits the
bordered box. Textarea and contenteditable children keep h-auto so
Textarea and RichTextEditor heights aren't clipped.
…gn popover end

- Add data-[state=open]:border-ring / ring-ring / ring-[2px] on the
  Filter trigger so the brand-colored ring stays visible when the
  popover is open (focus has moved to the content)
- Set PopoverContent align="end" so the 600px-wide popover's right
  edge aligns with the trigger's right edge instead of extending past
  the toolbar
Add aria-selected and a grey background on the column item that matches
selectedColumn so users can see which column's values are currently
shown in the right panel.
Compute internalTotalSelected from in-progress options state and pass
it as the Reset All button's disabled flag — no point resetting when
nothing is selected.
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 19, 2026

🦋 Changeset detected

Latest commit: 2240d53

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@genseki/ui Patch
@example/ui-playground Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@jettapat-metier jettapat-metier merged commit e574da1 into main May 19, 2026
1 check passed
@jettapat-metier jettapat-metier deleted the touch/fix/ui branch May 19, 2026 08:17
@github-actions github-actions Bot mentioned this pull request May 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants